<script setup lang="ts">
import { onMounted } from 'vue'
const handleScreenAuto = () => {
	const designDraftWidth = 1920 // 设计稿宽度
	// 根据屏幕的变化适配的比例
	const scale = document.documentElement.clientWidth / designDraftWidth
	// 缩放比例
	const screen = <HTMLElement>document.getElementById('screen')
	screen.style.transform = `scale(${scale}) translate(-50%)`
}
onMounted(() => {
	handleScreenAuto()
	window.onresize = () => {
		handleScreenAuto()
	}
})
</script>

<template>
	<div class="screen-root">
		<div id="screen" class="screen">
			<RouterView />
		</div>
	</div>
</template>

<style lang="scss" scoped>
.screen-root {
	background: #fff;
	height: 100vh;
	width: 100vw;
	.screen {
		display: inline-block;
		width: 1920px; // 设计稿的宽度
		height: 1080px; // 设计稿的高度
		transform-origin: 0 0;
		position: absolute;
		left: 50%;
		background: url(@/assets/img/page-bg.png) no-repeat;
		background-size: 100% 100%;
	}
}
</style>
